<template>
	<w-container class="plr-16">
		<w-navbar id="my-nav" title="我的求购"></w-navbar>
		<u-tabs :list="statusList" :current='currentIndex' :scrollable='false' :activeStyle="{color:'#FF2D23'}"
			inactiveStyle='font-size:28rpx' lineHeight='0' @click='changeStatus'></u-tabs>
		<view class="">
			<view class="bg-color-item flex pa-12 br-12 mb-12" v-for="(item,index) in list" :key="item.id"
				@click="toDetail(item)">
				<w-image :src='item.goods_image' width="80" height="80" radius="8"></w-image>
				<view class="pl-10 flex-1 flex flex-dir-col flex-js-sb">
					<view class="flex flex-js-sb flex-ai-center">
						<view class="text-overflow font-color-textPrimary" style="max-width: 300rpx;">
							{{item.goods_name && handleLang(item.goods_name)}}
						</view>
						<view class="font-color-textPrimary">
							<text class="font-size-14">￥</text>
							<text class="font-size-20">{{item && item.total_price}}</text>
						</view>
					</view>
					<view class="" v-if="(item.order_status==2|| item.order_status==3)&&item.number>1">
						<u-line-progress inactiveColor='#DEE8FF' style="width: 236rpx;"
							:percentage="(item.sale_number/item.number)*100" activeColor="#9F2825" :showText='false'
							height="8rpx"></u-line-progress>
						<view class="font-size-10 font-color-999 mt-4">
							{{handleLang('求购数量')}}：{{item.sale_number}}/{{item.number}}
						</view>
					</view>
					<view class="font-size-14 font-color-999" v-else>
						x{{item.number}}
					</view>

					<view class="flex flex-js-sb flex-ai-center">
						<text class="font-size-10 font-color-999">{{item.updatetime|formatDate}}</text>
						<view class="flex">
							<w-button v-if="item.order_status==2" size="mini" pain shape="circle"
								style="font-size: 24rpx;"
								@click.native.stop='cancelOrder(item,index)'>{{handleLang('取消订单')}}</w-button>
							<w-button v-if="item.order_status==1" size="mini" shape="circle" style="font-size: 24rpx;"
								@click.native.stop='pay(item,index)'>{{handleLang('立即支付')}}</w-button>
							<w-button v-if="item.order_status==4" size="mini" shape="circle" style="font-size: 24rpx;"
								@click.native.stop='toBeg(item)'>{{handleLang('重新求购')}}</w-button>
						</view>
					</view>

				</view>
			</view>
		</view>
		<w-loading :type="loading" empty-type="search"></w-loading>
		<CancelBegOrder v-if="currentOrderIndex>=0" ref='cancelOrder' :order='list[currentOrderIndex]'></CancelBegOrder>
		<PayBegOrder v-if="currentOrderIndex>=0" ref='payOrder' :order='list[currentOrderIndex]'></PayBegOrder>
	</w-container>
</template>

<script>
	import {
		getMyTradeList
	} from '@/api/trad/index.js'
	import CancelBegOrder from '../components/CancelBegOrder.vue'
	import PayBegOrder from '@/pages/market/components/PayBegOrder.vue'
	export default {
		components: {
			CancelBegOrder,
			PayBegOrder
		},
		data() {
			return {
				currentOrderIndex: -1,
				loading: 'none',
				statusList: [{
						name: "全部",
						status: null
					},
					{
						name: "求购中",
						status: 2
					},
					{
						name: "已成交",
						status: 3
					},
					{
						name: "已取消",
						status: 4
					}
				],
				search: {
					page: 1,
					status: null
				},
				list: []
			}
		},
		computed: {
			currentIndex() {
				return this.statusList.findIndex(v => v.status === this.search.status)
			}
		},
		onLoad() {
			this.getList(this.search)
		},
		onPullDownRefresh() {
			let search = this.$tools.copyObj(this.search)
			this.list = []
			this.loading = 'none'
			this.getList(search)
		},
		onReachBottom() {
			let search = this.$tools.copyObj(this.search)
			search.page++
			this.getList(search)
		},
		methods: {
			toBeg({
				goods_id
			}) {
				uni.navigateTo({
					url: '/pages/market/submitBegBuy?id=' + goods_id
				})
			},
			cancelOrder(item, index) {
				this.currentOrderIndex = index;
				this.$nextTick(() => {
					this.$refs.cancelOrder.cancel();
				})
			},
			toDetail({
				id
			}) {
				uni.navigateTo({
					url: '/pages/order/beg/info?id=' + id
				})
			},
			pay(item, index) {
				this.currentOrderIndex = index;
				this.$nextTick(() => {
					this.$refs.payOrder.pay();
				})
			},
			changeStatus({
				status
			}) {
				this.search.status = status;
				this.search.page = 1
				this.list = []
				this.loading = 'none'
				this.getList(this.search)
			},
			getList(search) {
				if (this.loading == 'loading' || this.loading == 'nomore') return;
				this.loading = 'loading'
				uni.stopPullDownRefresh()
				getMyTradeList(search).then(res => {

					this.loading = 'none'
					if (res.data.data.length) {
						this.search = search;
					}
					this.list = this.list.concat(res.data.data)
					if (res.data.data.length < res.data.per_page) {
						this.loading = 'nomore'
					}
					if (!res.data.total) {
						this.loading = 'empty'
					}
				})
			}
		}
	}
</script>

<style>

</style>